<template>
  <el-dialog title="新增设备类型" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
    <template>
      <el-form ref="ruleForm" :model="orderForm" label-width="100px" class="demo-ruleForm" :rules="rulesForm">
        <el-form-item label="型号名称" prop="name">
          <el-input v-model="orderForm.name" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="型号编码" prop="model">
          <el-input v-model="orderForm.model" placeholder="请输入(限制数字，字母，中划线，下划线)" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="货道行数" prop="vmRow">
          <el-input-number
            v-model="orderForm.vmRow"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width:450px"
          />
        </el-form-item>
        <el-form-item label="货道列数" prop="vmCol">
          <el-input-number
            v-model="orderForm.vmCol"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width:450px"
          />
        </el-form-item>
        <el-form-item label="货道容量" prop="channelMaxCapacity">
          <el-input-number
            v-model="orderForm.channelMaxCapacity"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width:450px"
          />
        </el-form-item>
        <el-form-item label="设备图片" prop="image">
          <el-upload
            ref="upload"
            v-model="orderForm.image"
            class="avatar-uploader"
            name="fileName"
            action="http://localhost:9528/api/vm-service/sku/fileUpload"
            :before-upload="beforeAvatarUpload"
            :limit="1"
            list-type="picture-card"
            :on-success="success"
            :show-file-list="false"
          >
            <img v-if="orderForm.image" :src="orderForm.image" class="preach-img">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <div class="el-upload__tip">支持扩展名:jpg、png,文件不得大于100kb</div>
        </el-form-item>
        <div class="button">
          <div>
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="editdorder">确 定</el-button>
          </div>
        </div>
      </el-form>
    </template>
  </el-dialog>
</template>

<script>
import { vmTypeAPI, editvmTypeAPI } from '@/api/vm'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    edittype: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const checkPlanName = (rule, value, callback) => {
      const patten = /^[a-zA-Z0-9_-\u4e00-\u9fa5]+$/
      if (!patten.test(value)) return callback(new Error('请输入合法的型号编码'))
      callback()
    }
    return {
      orderForm: {
        name: '',
        vmRow: undefined,
        vmCol: undefined,
        channelMaxCapacity: undefined,
        model: '',
        image: ''
      },
      rulesForm: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        vmRow: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        vmCol: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        channelMaxCapacity: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: checkPlanName, trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    edittype: {
      handler() {
        this.orderForm = { ... this.edittype }
      },
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.$emit('update:dialogVisible', false)
      this.$refs.upload.clearFiles()
      this.orderForm = {
        name: '',
        vmRow: undefined,
        vmCol: undefined,
        channelMaxCapacity: undefined,
        model: '',
        imageUrl: ''
      }
    },
    async editdorder() {
      if (this.orderForm.typeId) {
        try {
          const result = await editvmTypeAPI(this.orderForm.typeId, this.orderForm)
          if (result.data) {
            this.$message.success('修改成功')
          }
        } catch (error) {
          this.$message.error('该设备正在运行')
        }
      } else {
        const res = await vmTypeAPI(this.orderForm)
        if (res.data) {
          this.$message.success('创建成功')
        }
      }
      this.handleClose()
      this.$parent.getvmType()
    },
    beforeAvatarUpload(file) {
      const uploadLimit = 100
      const uploadTypes = ['jpg', 'png']
      const filetype = file.name.replace(/.+\./, '')
      const isRightSize = (file.size || 0) / 1024 < uploadLimit
      if (!isRightSize) {
        this.$message.error('文件大小超过 ' + uploadLimit + 'kb')
        return false
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message: '请上传后缀名为jpg、png类型的图片'
        })
        return false
      }
      return true
    },
    success(response) {
      this.orderForm.image = response
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-left: 100px;
}

.el-form {
  .button {
    display: flex;
    justify-content: center;
  }
}

.el-input-number {
  display: flex;
}

.preach-img {
  width: 100px;
  height: 100px;
}
</style>
